<template>
	<view class="safe-assess-wrap">
		<view class="header">
			<uni-nav-bar :status-bar="true" leftIcon="back" rightText="概况" @clickLeft="clickLeft" @clickRight="clickRight">
				<div class="solt-title-wrap">
					<view @click.stop="chooseDepartment(iconType)">
						<text>{{departmentName}}</text>
						<uni-icons :type="iconType"></uni-icons>
					</view>
				</div>
			</uni-nav-bar>
		</view>
		<!-- 内容 -->
		<view class="safe-assess-content">
			<view class="safe-score-wrap">
				<view class="content-left">
					<view class="safe-circle" :style="{backgroundImage: backgroundImage}">
						<view class="content-title">{{headName}}</view>
					</view>
				</view>
				<view class="content-right">
					<view class="content-right-item">
						<view>今日异常总数</view>
						<view><countup :num="canteenExceptionInfo.total" width="10"></countup></view>
					</view>
					<view class="content-right-item">
						<view>今日已处理</view>
						<view><countup :num="canteenExceptionInfo.handleCount" width="10"></countup></view>
					</view>
					<view class="content-right-item">
						<view>今日未处理</view>
						<view><countup :num="canteenExceptionInfo.noHandleCount" width="10"></countup></view>
					</view>
				</view>
			</view>
			<!-- 异常列表 -->
			<view class="canteen-safe-details">
				<view class="canteen-safe-item" v-for="(item,index) in canteenExceptionInfo.list" :key="index">
					<view class="canteen-safe-content" v-if="item.anomalousType">
						<view class="canteen-row" @click="toCheckAbnormalList(item)">
							<view class="canteen-row-left">
								<view class="canteen-row-left-img">
									<image class="row-image" :src="getIcon(item.anomalousType)" alt=""/>
								</view>
								<view class="abnormal-type">{{getAbnormalName(item.anomalousType)}}</view>
							</view>
							<view class="canteen-row-right">
								<view class="canteen-right-num">
									<view class="today-abnormal-wrap">
										<view class="today-text">今日</view>
										<view class="today-abnormal-wrap-num">
											<countup :num="item.todayCount" width="10" color="#FF5A59"></countup>
										</view>
									</view>
									<view class="history-abnormal-wrap">
										<view class="today-text">历史</view>
										<view class="history-abnormal-wrap-num">
											<countup :num="item.historyCount" width="10"></countup>
										</view>
									</view>
								</view>
								<view>
									<uni-icons type="arrowright"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- popup-picker -->
			<lb-picker ref="LbPickerREF" :list="deptParentList" :props="myProps" @confirm="handleConfirm"></lb-picker>
		</view>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker/index.vue'
	export default {
		components: {LbPicker},
		data() {
			return {
				iconType: 'arrowdown',
				orgId: '',
				departmentId: '',
				departmentName: '',
				deptParentList: [],
				myProps: {
					label: 'departmentName',
					value: 'departmentId'
				},
				backgroundImageList: [
					{headName: '优秀', backgroundImage: 'linear-gradient(to right, #1ceeaf, #12d8ba)'},
					{headName: '良好', backgroundImage: 'linear-gradient(to right, #f7b700, #fda100)'},
					{headName: '一般', backgroundImage: 'linear-gradient(to right, #ff4d69, #ff3539)'}
				],
				backgroundImage: '',
				headName: '',
			    canteenExceptionInfo: { // 食堂异常信息情况
				  total: 0,
				  handleCount: 0,
				  noHandleCount: 0
			    },
				matchName: ['证件异常', '设备异常', '人员异常', '食品异常'],
				iconsList: [
					require('../../static/img/safeAssess/abnormalType/papers_abnormal.png'),
					require('../../static/img/safeAssess/abnormalType/equipment_abnormal.png'),
					require('../../static/img/safeAssess/abnormalType/personal_abnormal.png'),
					require('../../static/img/safeAssess/abnormalType/food_abnormal.png')
				]
			}
		},
		onLoad(option) {
			this.orgId = this.$store.getters.orgId
			this.departmentId = option.departmentId
			this.departmentName = option.departmentName
			console.log('%%%%%%%%%%option%%%%%%%%%', option)
			this.init()
		},
		onPullDownRefresh() {
			this.init()
			uni.stopPullDownRefresh()
		},
		methods: {
			clickLeft() {
				uni.navigateBack()
			},
			clickRight() {
				uni.navigateTo({
					url: `../details/details?departmentId=${this.departmentId}`,
					animationType: 'fade-in',
					animationDuration: 2000
				})
			},
			chooseDepartment(type) {
				type === 'arrowdown' ? this.iconType = 'arrowup' : this.iconType = 'arrowdown',
				this.$refs.LbPickerREF.show()
			},
			init () {
				this.getDepartmentList()
				this.getTypeGroupInfo()
			},
			/**
			 * 获取组织下的所有部门(获取所有食堂信息)并和安卓传递进行的信息对比然后显示
			 */
			getDepartmentList() {
				let params = {
					orgId: this.orgId
				}
				this.$request.ygstConstraManagementDeptListGet(params).then(res => {
					this.deptParentList = res.list
					console.log('this.deptParentList', this.deptParentList)
				})
			},
			handleConfirm(e) {
				let {departmentName, departmentId} = e.item
				this.departmentName = departmentName
				this.departmentId = departmentId
				this.getTypeGroupInfo()
			},
			getIcon(type) {
				return type ? this.iconsList[parseInt(type) - 1] : ''
			},
			getAbnormalName(code) {
				return code ? this.matchName[parseInt(code) - 1] : ''
			},
			/**
			 * 获取各类型异常数量
			 * 
			 */
			getTypeGroupInfo() {
				let params = {
					departmentId: this.departmentId
				}
				this.$request.ygstAppExceptionContractorInfoGet(params).then(res => {
					this.canteenExceptionInfo = res
					this.getExceptionLightTotal(this.canteenExceptionInfo.light)
				})
			},
			/**
			 * 获取指示灯异常总数
			 * 
			 */
			getExceptionLightTotal(light) {
			  let exceptionNum = Math.floor(Math.max(0, light))
			  if (exceptionNum === 0) {
				let {backgroundImage, headName} = this.backgroundImageList[0]
				this.backgroundImage = backgroundImage
				this.headName = headName
			  } else if (exceptionNum <= 6) {
				let {backgroundImage, headName} = this.backgroundImageList[1]
				this.backgroundImage = backgroundImage
				this.headName = headName
			  } else {
				let {backgroundImage, headName} = this.backgroundImageList[2]
				this.backgroundImage = backgroundImage
				this.headName = headName
			  }
			},
			toCheckAbnormalList(item) {
				console.log('@@@@@@@@item@@@@@@@', item)
				uni.navigateTo({
					url: `../abnormalList/abnormalList?departmentId=${this.departmentId}&anomalousType=${item.anomalousType}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.safe-assess-wrap {
	.header {
		& /deep/ .uni-navbar__header-container.uni-navbar__content_view {
			justify-content: center;
		}
	}
	.safe-assess-content {
		.safe-score-wrap {
			height: 300rpx;
			position: relative;
			padding: 10rpx 36rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			.content-left {
				flex: 0 0 160rpx;
				.safe-circle {
					width: 160rpx;
					height: 160rpx;
					border-radius: 100%;
					position: relative;
					.content-title {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						color:  $uni-bg-color;
						font-size: $uni-font-size-lg;
					}
				}
			}
			.content-right {
				flex: 1;
				padding: 10rpx 0px 10rpx 36rpx;
				.content-right-item {
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
		.canteen-safe-details {
			padding: 10rpx 36rpx;
			.canteen-safe-item {
			  margin: 18rpx 0px;
			  box-sizing: border-box;
			  border-bottom-left-radius: 20rpx;
			  border-bottom-right-radius: 20rpx;
			  box-shadow: 2px 2px 30px #F4F4F4;

			  &:nth-last-child(1) {
				margin-bottom: 0rpx;
			  }

			  .canteen-safe-content {
				text-align: center;
				border-radius: 5px;
				box-shadow: 0px 0px 2px #ccc;

				.canteen-row {
				  font-size: 0rpx;
				  box-sizing: border-box;
				  padding: 36rpx;
				  display: flex;
				  justify-content: space-between;
				  align-items: center;

				  .canteen-row-left {
					box-sizing: border-box;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.abnormal-type {
					  font-size: 32rpx;
					  color: #ccc;
					  padding-left: 15px;
					  vertical-align: middle;
					}

					.canteen-row-left-img {
					  max-width: 46rpx;
					  max-height: 46rpx;
					  .row-image {
						width: 46rpx;
						height: 46rpx;
						object-fit: contain;
					  }
					}
				  }

				  .canteen-row-right {
					width: 45%;
					flex: 0 0 45%;
					box-sizing: border-box;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.canteen-right-num {
					  width: 100%;
					  padding-right: 6px;
					  font-weight: bold;
					  display: flex;
					  flex-flow: column nowrap;
					  font-size: 40rpx;
					  color: #ccc;
					  .today-abnormal-wrap,
					  .history-abnormal-wrap {
						width: 100%;
						line-height: 24rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 10rpx 0rpx;
						.today-text {
							font-size: 30rpx;
						}
					  }
					  .today-abnormal-wrap {
						.today-abnormal-wrap-num {
						  color: red;
						  font-size: 60rpx;
						}
					  }
					  .history-abnormal-wrap {
						.history-abnormal-wrap-num {
						  color: #C1C1C1;
						  font-size: 60rpx;
						}
					  }

					}

					.arrow-right {
					  width: 8px;
					  height: 8px;
					  border-top: 1px solid red;
					  border-right: 1px solid red;
					  transform: rotate(45deg);
					}
				  }

				}

				.not-on-line {
				  line-height: 6rem;
				  font-size: 40rpx;
				  color: #fff;
				}
			  }
			}
		  }
	}
}
</style>
